<template>
  <div class="channel">
    <div class="chan_wrap">
      <div class="left">
        <ul class="menu">
          <li v-for="(one, index) in menuData"
              @click.stop="changeMenu(one.robottype)"
              class="menu-item"
              :key="index"
              :class="[activeName === one.robottype ? 'active' : '']">{{one.robot}}</li>
        </ul>
      </div>
      <ConfigTable :configData="menuData" class="right" :activeName="activeName" v-if="flag"></ConfigTable>
    </div>
  </div>
</template>
<script>
  import { isHasMenu } from '@/utils/m7Utils'
  import ConfigTable from './ConfigTable'
  export default {
    name: 'thirdPartyConfig',
    data () {
      return {
        activeName: 'yunmi',
        menuData: [],
        flag: false
      }
    },
    components: {
      ConfigTable
    },
    methods: {
      changeMenu (value) {
        this.activeName = value
      }
    },
    beforeMount () {
      this.$store.dispatch('getThirdthAppList').then(res =>{
        this.menuData = res.data
        this.activeName = this.menuData[0].robottype
        this.flag = true
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .channel
    padding 20px
    box-sizing border-box
    .chan_wrap
      border 1px solid $c-border1
      height calc(100vh - 135px)
      background-color #fff
    .left
      width 150px
      height 100%
      overflow-y auto
      float left
      box-sizing border-box
      border-right 1px solid $c-border1
    .right
      width calc(100% - 150px)
      height 100%
      float left
      overflow hidden
  .menu
    line-height 36px
    text-align left
  .menu-item
    cursor pointer
    font-size 14px
    padding-left 14px
    font-weight 300
    text-transform capitalize
  .menu-item.active
    background-color $c-main
    color #fff
</style>
